<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P198 动手实践：图片放大特效</title>
</head>

<body>
    <div id="box" class="box">
        <div id="smallBox" class="small">
            <img src="images/small.jpg">
            <div id="mask" class="mask"></div>
        </div>
        <div id="bigBox" class="big">
            <img id="bigImg" src="images/big.jpg">
        </div>
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        $('smallBox').onmouseover = function () {
            $('mask').style.display = 'block';
            $('bigBox').style.display = 'block';
        }
        $('smallBox').onmouseout = function () {
            $('mask').style.display = 'none';
            $('bigBox').style.display = 'none';
        };
        $('smallBox').onmousemove = function (event) {
            var event = event || window.event;
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            var boxX = pageX - $('box').offsetLeft;
            var boxY = pageY - $('box'), offsetTop;
            var maskX = boxX - $('mask').offsetWidth / 2;
            var maskY = boxY - $('mask').offsetHeight / 2;
            if (maskX < 0) {
                maskX = 0;
            }
            if (maskY > $('smallBox').offsetWidth - $('mask').offsetWidth) {
                maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;
            }
            if (maskY < 0) {
                maskY = 0;
            }
            if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
                maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
            }
            $('mask').style.left = maskX + 'px';
            $('mask').style.top = maskY + 'px';
            var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
            var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
            var rate = bigImgToMove / maskToMove;
            $('bigImg').style.left = -rate * maskX + 'px';
            $('bigImg').style.top = -rate * maskY + 'px';
        };
    </script>
    <a href="../首页/page08.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>